<template>
  <div class="layout">
    <div class="back" @click="goBack">
      <el-icon size="28"><ArrowLeftBold /></el-icon>
    </div>
    <div class="top">
      <!-- 歌图片 -->
      <div class="left">
        <el-image :src="musicDetail.musicImg" fit="cover"></el-image>
      </div>
      <!-- 歌内容 -->
      <div class="middle">
        <!-- 歌名部分 -->
        <div class="title">
          <p class="song">千千阙歌</p>
          <p class="author">杨千嬅</p>
        </div>
        <!-- 歌词部分 -->
        <div class="lyrics-container">
          <div class="lyrics">
            <p v-for="(line, index) in musicDetail.musicLyric" :key="index" class="lyric-line">
              {{ line }}
            </p>
          </div>
        </div>
      </div>
      <!-- 包含歌单 -->
      <div class="right">
        <div class="list">
          <div
            class="list-item"
            v-for="(item, index) in musicDetail.musicContainSong"
            :key="index"
            :data-index="index"
          >
            <el-image :src="item.playlistImg" fit="cover"></el-image>
            <p class="text">{{ item.playlistText }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 评论部分 -->
    <div class="comment">
      <div class="title">
        <div class="left">
          <span>最新评论(33245)</span>
        </div>
        <div class="right">
          <div class="w-c" @click="handleWriteComment">
            <el-icon size="21" color="#363D62" style="margin-right: 10px"><EditPen /></el-icon>
            <span>写评论</span>
          </div>
          <!-- <div class="go-top">
            <el-icon size="21" color="#363D62"><Upload /></el-icon>
          </div> -->
        </div>
      </div>

      <div class="list">
        <div class="list-item" v-for="(item, index) in commentList" :key="index">
          <div class="avatar">
            <el-image :src="item.userHeader" fit="cover"></el-image>
          </div>
          <div class="info">
            <div class="name">{{ item.userName }}</div>
            <div class="content">
              {{ item.userContent }}
            </div>
            <!-- 回复 -->
            <div class="reply" v-if="item.replyList">
              <span v-for="reply in item.replyList" :key="reply">
                <span class="commentator">{{ reply.replyUser }}：</span>
                {{ reply.replyContent }}
              </span>
            </div>
            <div class="t-n">
              <div class="left">
                <span>{{ item.userTime }}</span>
              </div>
              <div class="right">
                <div class="num">
                  <el-icon size="24" color="#7D829E" style="margin-left: 5px"><Star /></el-icon>
                  <span>{{ item.likeNum }}</span>
                </div>
                <el-icon size="24" color="#7D829E"><ChromeFilled /></el-icon>
                <el-icon size="24" color="#7D829E"><ChatLineRound /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 书写评论 -->
  <el-dialog
    class="my-dialog"
    v-model="isShowVisible"
    width="800"
    align-center
    :modal="false"
    :lock-scroll="false"
  >
    <!-- 内容区域 -->
    <div class="content" style="display: flex; flex-direction: column; align-items: center">
      <span
        class="title"
        style="margin-bottom: 15px; font-size: 28px; line-height: 39px; color: #7d829e"
        >歌曲：千千阙歌</span
      >
      <el-input
        v-model="textarea"
        maxlength="140"
        placeholder="发表评论"
        :autosize="{ minRows: 7 }"
        size="large"
        show-word-limit
        type="textarea"
      />
    </div>
    <!-- 底部按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" circle @click="handleSubmitComment">评论</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  ArrowLeftBold,
  EditPen,
  Star,
  ChromeFilled,
  ChatLineRound,
} from '@element-plus/icons-vue'
import router from '@/router'

const data = ref(null)
const isShowVisible = ref(false)
const textarea = ref('')

const commentList = ref([
  {
    userHeader:
      'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/images/a93f166a-420a-463d-a938-783c9839b0da.png',
    userName: '千万别买这几个家具家电水电费看看电视发放萨芬',
    userContent:
      '在苦苦挣扎中，如果有人向你投以理解的目光，你会感到一种生命的暖意，或许仅有短暂的一瞥，就足以使我感奋不已。',
    replyList: [
      {
        replyUser: '回复人名称',
        replyContent:
          '安多里尼先生又点了支香烟。他抽的凶极了。接着他说：“坦白说，我简直不知道跟你说什么好，霍尔顿。”“我知道。很少有人跟我谈得来。我自己心里有数。'
      }
    ],
    userTime: '2021年12月10日 15:44',
    likeNum: 8405
  },
  {
    userHeader:
      'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/images/a93f166a-420a-463d-a938-783c9839b0da.png',
    userName: '千万别买这几个家',
    userContent:
      '在苦苦挣扎中，如果有人向你投以理解的目光，你会感到一种生命的暖意，或许仅有短暂的一瞥，就足以使我感奋不已。',
    userTime: '2021年12月10日 15:44',
    likeNum: 8405
  }
])

const props = defineProps({
  musicDetail: {
    type: Object
  }
})

// 点击写评论->打开评论框
const handleWriteComment = () => {
  isShowVisible.value = true
  console.log('写评论')
}

// 发表评论->关闭评论框
const handleSubmitComment = () => {
  // 新的评论信息插入评论列表
  const newComment = {
    userHeader:
      'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/images/a93f166a-420a-463d-a938-783c9839b0da.png',
    userName: '新发表评论人',
    userContent: textarea.value,
    userTime: '2024年08月115日 09:44',
    likeNum: 0
  }

  commentList.value.unshift(newComment)
  isShowVisible.value = false
  console.log('发表评论', textarea.value)
}

// 点击返回上一页
const goBack = () => {
  router.go(-1)
}

onMounted(() => {
  data.value = props.musicDetail
})
</script>

<style lang="scss" scoped>
.layout {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #bdbccd -3%, #f2f1f6 100%);

  .back {
    position: absolute;
    top: 20px;
    left: 48px;

    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
  }

  .top {
    display: flex;
    align-items: center;
    min-height: 1024px;
    .left {
      margin-left: 154px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 406px;
      height: 406px;

      .el-image {
        width: 294px;
        height: 294px;
        border-radius: 50%;
      }
    }

    .middle {
      margin-left: 140px;
      width: 327px;
      height: 706px;
      overflow: hidden;

      .title {
        .song {
          font-size: 36px;
          font-weight: 500;
          line-height: 50px;
          text-align: center;
          color: #363d62;
        }

        .author {
          margin-top: 7px;
          font-size: 24px;
          font-weight: 500;
          line-height: 34px;
          text-align: center;
          color: #7d829e;
        }
      }

      .lyrics-container {
        margin-top: 15px;
        overflow-y: auto;
        height: 585px;
        width: 100%;
        text-align: center;
        border-radius: 8px; /* 边框圆角 */
        box-shadow: inset 0 0 -20px -10px rgba(255, 255, 255, 0.15); /* 模糊边框 */

        &::-webkit-scrollbar {
          width: 0; /* 设置滚动条的宽度为 5 像素。 */
        }
      }

      .lyrics {
        font-size: 18px;
        color: #333;
        line-height: 1.6;
        overflow-y: hidden;
        transition: max-height 0.3s ease-in-out;
      }

      .lyric-line {
        margin-bottom: 10px;
      }
    }

    .right {
      margin-left: 108px;
      width: 320px;
      max-height: 609px;
      overflow: hidden;

      .list {
        display: flex;
        flex-direction: column;

        .list-item {
          margin-bottom: 20px;
          display: flex;
          align-items: center;

          .el-image {
            margin-right: 12px;
            width: 48px;
            height: 48px;
            border-radius: 8px;
          }

          .text {
            font-size: 20px;
            font-weight: normal;
            line-height: 28px;
            text-align: center;
            letter-spacing: 0px;

            /* 外部/字体2 */
            color: #7d829e;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .comment {
    padding: 0 77px;

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        span {
          font-size: 24px;
          font-weight: normal;
          line-height: 34px;
          color: #7d829e;
        }
      }

      .right {
        display: flex;
        align-items: center;
        font-size: 20px;
        font-weight: normal;
        line-height: 28px;
        color: #363d62;

        .w-c {
          padding: 13px 44px;
          border-radius: 1000px;
          cursor: pointer;
          background-color: #e1e2e7;
        }

        .go-top {
          margin-left: 102px;
          padding: 13px 13px;
          border-radius: 1000px;
          background-color: #e1e2e7;
        }
      }
    }

    .list {
      margin-top: 30px;
      max-height: 880px;
      overflow: hidden;
      margin-bottom: 102px;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 0; /* 设置滚动条的宽度为 5 像素。 */
      }

      .list-item {
        margin-bottom: 21px;
        padding: 28px 28px;
        display: flex;
        max-width: 880px;
        min-height: 197px;
        border-radius: 16px;
        background-color: #fff;

        .avatar {
          width: 60px;
          height: 60px;
          background: url('../assets/images/avatar.jpg') no-repeat center / cover;

          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 100%;
          }
        }

        .info {
          margin-left: 12px;
          display: flex;
          flex-direction: column;
          min-width: 752px;

          .name {
            max-width: 213px;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 18px;
            font-weight: normal;
            line-height: 25px;
            color: #4ca0dd;
          }

          .content {
            margin-top: 16px;
            font-size: 18px;
            font-weight: normal;
            line-height: 30px;
            color: #363d62;
          }

          .reply {
            margin-top: 16px;
            padding: 10px 10px;
            max-width: 732px;
            font-size: 18px;
            font-weight: normal;
            line-height: 30px;
            color: #363d62;
            background-color: #f2f2f2;

            .commentator {
              color: #4ca0dd;
            }
          }

          .t-n {
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .left {
              font-size: 16px;
              font-weight: normal;
              line-height: 22px;
              color: #bababd;
            }

            .right {
              display: flex;
              align-items: center;
              justify-content: space-between;

              width: 210px;
              height: 24px;

              .num {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                line-height: 22px;
                color: #363d62;
              }
            }
          }
        }
      }
    }
  }
}

:deep(.el-textarea__inner) {
  padding: 16px 16px;
  font-size: 20px;
  line-height: 28px;
  color: #7d829e;
}

.el-dialog__footer {
  .dialog-footer {
    .el-button {
      padding: 13px 60px;
      background-color: #e00000;
      border-radius: 1000px;
      border-width: 0;

      span {
        font-size: 24px;
        font-weight: normal;
        line-height: 24px;
        color: #fff;
      }
    }
  }
}

// :deep(.el-button) {
//   padding: 13px 60px;
//   background-color: #e00000;
//   border-radius: 1000px;
//   border-color: 0;

//   .span {
//     display: inline-block;
//     font-size: 24px;
//     font-weight: normal;
//     line-height: 24px;
//     color: #fff;
//   }
// }
</style>
